<template>
  <view class="mine-petal">
    <CustomHeader :scroll-top="scrollTop" :title="'我的花瓣&花朵'" />

    <!-- 我的花朵数量 -->
    <view class="mine-petal__flower">
      <BorderBox :inside-padding="18" :bg-color="'#FFFBEA'" :bd-color="'#CB9064'">
        <view class="mine-petal__flower-info">
          <view class="mine-petal__flower-info--title">我的花朵</view>
          <view class="mine-petal__flower-info--number">
            <image :src="FLOWER_ICON" />
            <text>{{ flowerInfo.flower_num }}</text>
          </view>
        </view>
      </BorderBox>
      <image class="mine-petal__flower--bg" :src="PETAL_LUCENCY_ICON" />
    </view>
    <!-- 我的花瓣数量 -->
    <view class="mine-petal__petal-sum mine-petal__flower">
      <BorderBox :inside-padding="18" :bg-color="'#FFFBEA'" :bd-color="'#CB9064'">
        <view class="mine-petal__flower-info">
          <view class="mine-petal__flower-info--title">
            <text>我的花瓣</text>
            <text class="sub-title">每10个花瓣可合成一朵花</text>
          </view>
          <view class="mine-petal__flower-info--number">
            <view class="mine-petal__flower-info--number__sum">
              <image class="petal-icon" :src="PETAL_ICON" />
              <text>{{ flowerInfo.petal_num }}</text>
            </view>
            <view :class="{ 'mine-petal__flower-info--cant-compound': !canCompoundFlower }" class="mine-petal__flower-info--compound" @tap="composeFlowers">合成花朵</view>
          </view>
        </view>
      </BorderBox>
    </view>

    <!-- 切换区域 -->
    <view class="mine-petal__switch">
      <view v-for="item in switchTabData" :key="item.id" class="mine-petal__switch--item" :class="{ active: currentTab === item.id }" @tap="handleSwitchTab(item)">{{ item.title }}</view>
    </view>

    <!-- 列表区域 -->
    <!-- 赞花瓣列表 -->
    <view v-show="currentTab === 1" class="mine-petal__list mine-petal__get-petal">
      <view v-for="(partValue,partKey,pIndex) in gainPetal" :key="pIndex">
        <view class="mine-petal__list__partial-title">{{ partValue.title }}</view>

        <view v-for="(item, index) in partValue.content" :key="index" class="mine-petal__get-petal__item">
          <view class="mine-petal__get-petal__item--info">
            <view class="mine-petal__get-petal__item--name">{{ item.title }}</view>
            <view>
              <image :src="PETAL_ICON" class="mine-petal__get-petal__item--icon" />
              <text class="mine-petal__get-petal__item--add-num">{{ item.score }}</text>
              <text v-if="item.desc" class="mine-petal__get-petal__item--add-tip">{{ item.desc }}</text>
            </view>
          </view>
          <button v-if="pIndex === 1 && index === 0 " open-type="share" class="mine-petal__get-petal__item--btn share-btn" @tap="casbcuiasuis">{{ item.button }}</button>
          <view v-else class="mine-petal__get-petal__item--btn" @tap="btnHandel(item,index)">{{ item.button }}</view>
        </view>
      </view>
    </view>
    <!-- 花瓣记录 -->
    <view v-show="currentTab === 2" class="mine-petal__list mine-petal__flower-record">
      <view v-if="petalRecordList.length" class="mine-petal__list__partial-title">
        <text>累计花瓣数</text>
        <text class="total-flower-num">{{ totalFlowerNum }}</text>
      </view>
      <view v-for="(item, index) in petalRecordList" :key="index" class="mine-petal__flower-record__item">
        <view class="mine-petal__flower-record__item--info">
          <view class="mine-petal__flower-record__item--name">{{ item.log_channel }}</view>
          <view class="mine-petal__flower-record__item--time">{{ item.created_at }}</view>
        </view>
        <view :class="getChangeItemClass(item)" class="mine-petal__flower-record__item--num">{{ getChangeItemSymbol(item) }}{{ item.change_num }}</view>
      </view>
      <!-- 缺省 -->
      <view v-if="!petalRecordList.length" class="mine-petal__list__default">
        <image :src="DEFAULT_IMAGE" alt />
        <view>暂无花瓣记录哦～</view>
      </view>
    </view>

    <!-- 合成花瓣弹窗 -->
    <AwardGive :position="'my_petal'" :show.sync="showAward" :type="awardType" :award-text="composeFlowersInfo" @changeType="changeType" />
    <!-- 打卡日签 -->
    <ClockSign :show.sync="showShare" :theme-id="clockSignInfo.themeId" :student-id="clockSignInfo.studentId" :uuid="clockSignInfo.uuid" />
  </view>
</template>

<script>
import "./index.scss"
import Taro from "@tarojs/taro"
import { Component, Vue } from "vue-property-decorator"
import CustomHeader from "_c/custom-header"
import BorderBox from "_c/border-box"
import AwardGive from "_c/award-give"
import ClockSign from '_c/generate-image/index.vue'
import {
  getFlowerNum,
  composeFlowers,
  petalRecords,
  gainPetalHandle,
  gainPetalList,
} from "_api/mine-petal"
import {
  CLOCK_TYPE, SHARE_TYPE, GROUP_TYPE, IS_JOIN_ACTIVITY, NOT_JOIN_ACTIVITY, COLLECT_PETALS_TAB, PETALS_RECORD_TAB, COMPOUND_FLOWER_MINIMUM, NORMAL_TYPE, COMPOSE_FLOWER_TYPE, PETAL_GET, PETAL_USE,
  PETAL_ICON,
  PETAL_LUCENCY_ICON,
  FLOWER_ICON
} from '@/config/mine-petal'
import { DEFAULT_IMAGE } from '@/libs/image-url'
/* 攒花瓣事件映射 */
const TYPE_HANDLE = {
  [CLOCK_TYPE]: 'clockTypeHandle',
  [SHARE_TYPE]: 'shareTypeHandle',
  [GROUP_TYPE]: 'groupTypeHandle'
}

export default {
  components: {
    CustomHeader,
    BorderBox,
    AwardGive,
    ClockSign
  },
  data () {
    return {
      FLOWER_ICON,
      PETAL_LUCENCY_ICON,
      /* 花瓣图标 */
      PETAL_ICON,
      /* 花瓣记录缺省图 */
      DEFAULT_IMAGE,
      /* 切换tab数据 */
      switchTabData: [
        { title: "攒花瓣", id: COLLECT_PETALS_TAB },
        { title: "花瓣记录", id: PETALS_RECORD_TAB },
      ],
      /* 选择中的tab */
      currentTab: 1,
      /* 我的花瓣信息 */
      flowerInfo: {},
      /* 合成花瓣后弹窗 */
      showAward: false,
      /* 合成花朵后弹窗信息 */
      composeFlowersInfo: {
        title: '恭喜你'
      },
      /* 花瓣记录列表 */
      petalRecordList: [],
      /*  攒花瓣任务列表 */
      gainPetal: {},
      /*  */
      petalHandle: {},
      /* 分页信息 */
      pagination: {
        page: 1,
        per_page: 10,
        lastPage: false,
        loading: false,
      },
      /* 打卡日签显示 */
      showShare: false,
      clockSignInfo: {
        studentId: '',
        uuid: "",
        themeId: ''
      },
      awardType: NORMAL_TYPE,
      /* 获取的花瓣总数 */
      totalFlowerNum: 0,
      scrollTop: 0,
      composeFlowerLoading: false,

    }
  },
  computed: {
    /* 是否可以合成花朵 */
    canCompoundFlower () {
      return this.flowerInfo.petal_num >= COMPOUND_FLOWER_MINIMUM
    }
  },
  onPageScroll ({ scrollTop }) {
    this.scrollTop = scrollTop
  },
  created () {
    this.getFlowerNum()
    this.getGainPetalList()
    this.gainPetalHandle()

  },
  /* 分享触发事件 */
  onShareAppMessage () {
    return {
      title: '习惯百日行',
      path: `/pages/index/index?login_invite_id=${this.flowerInfo.id}`,
    }
  },
  /* 页面触底事件 */
  onReachBottom (e) {
    this.currentTab === PETALS_RECORD_TAB && this.getPetalRecords()
  },
  methods: {
    getChangeItemSymbol ({ log_type }) {
      return log_type === PETAL_GET ? '+' : '-'
    },
    getChangeItemClass ({ log_type }) {
      return log_type === PETAL_USE && 'petal-use'
    },
    casbcuiasuis () {
      console.log('casbcuiasuiscasbcuiasuiscasbcuiasuis')
    },
    changeType () {
      this.awardType = NORMAL_TYPE
      this.composeFlowersInfo = {
        title: "恭喜你",
      }
    },
    /* 分页事件处理 */
    async handlePaging (fun) {
      if (!fun || this.pagination.lastPage || this.pagination.loading) return
      this.pagination.loading = true
      const { data: { data: { change_records, total_flower_num }, meta: { pagination: { total_pages } } } } = await fun(this.pagination)
      this.totalFlowerNum = total_flower_num
      if (this.pagination.page === 1) {
        this.petalRecordList = change_records || []
      } else {
        this.petalRecordList = [...this.petalRecordList, ...change_records]
      }
      /* 判断最后一页 */
      console.log(~~total_pages, this.pagination.page, 'dsjdbsyid')
      ~~total_pages === this.pagination.page ? (this.pagination.lastPage = true) : this.pagination.page++
      this.pagination.loading = false
    },
    /* 打卡按钮事件处理 */
    clockTypeHandle ({ is_join_activity, activity_id }, index) {
      /* 点击的第三个按钮 -- 且参加活动时 */
      const hasActivity = is_join_activity === IS_JOIN_ACTIVITY
      if (index === 2 && hasActivity) {
        Taro.navigateTo({
          url: `/pages/activity-ranking/index?id=${activity_id}`
        })
        return
      }
      hasActivity && Taro.setStorageSync("today", 1)
      Taro.switchTab({
        url: '/pages/index/index'
      })
    },
    /* 分享按钮事件处理 */
    shareTypeHandle (prop, index) {
      this.showShare = true
    },
    /* 组团按钮事件处理 */
    groupTypeHandle ({ is_join_activity, activity_id }, index) {
      if (is_join_activity === NOT_JOIN_ACTIVITY) {
        /* 没参加活动跳首页-推荐 */
        Taro.switchTab({
          url: `/pages/index/index`
        })
      } else if (index === 0) {
        /* 参加过活动跳组团 */
        Taro.navigateTo({
          url: `/pages/group/home/index?id=${activity_id}`
        })
      } else {
        /* index === 1 跳组团邀请海报页面 */
        Taro.navigateTo({
          url: `/pages/group/invitation/index?id=${activity_id}`
        })
      }
    },
    btnHandel ({ type }, index) {
      /**
       *  index 固定
       */
      /* 跳转对应页面 */
      /* 对应模块参数 */
      const prop = this.petalHandle[type]
      /* 执行对应模块事件 */
      this[TYPE_HANDLE[type]](prop, index)

    },
    /* tab切换事件 */
    handleSwitchTab ({ id }) {
      this.currentTab = id
      console.log(this.currentTab, id)
      this.currentTab === PETALS_RECORD_TAB && !this.petalRecordList.length && this.getPetalRecords()
    },
    /* 攒花瓣处理 */
    async gainPetalHandle () {
      const { data } = await gainPetalHandle()
      this.petalHandle = data
      this.clockSignInfo = {
        studentId: data.share.posterInfo.student_id,
        uuid: data.share.posterInfo.uuid,
        themeId: data.share.posterInfo.theme_id,
      }
      console.log(data)
    },

    /* 攒花瓣列表 */
    async getGainPetalList () {
      const { data } = await gainPetalList()
      this.gainPetal = data
    },

    /* 获取花瓣记录列表 */
    getPetalRecords () {
      this.handlePaging(petalRecords)
    },

    /* 合成花瓣 */
    async composeFlowers () {
      if (!this.canCompoundFlower) return
      if (this.composeFlowerLoading) return
      this.composeFlowerLoading = true
      this.awardType = COMPOSE_FLOWER_TYPE
      const { data } = await composeFlowers().catch(e => {
        Taro.showToast({ title: e.message, icon: "none" })
      })
      this.showAward = true
      this.composeFlowersInfo = {
        flowerNum: data.obtain_flower_num,
        consumeNum: data.consume_petal_num,
        title: "花瓣合成成功",
      }
      setTimeout(() => {
        this.composeFlowerLoading = false
      }, 500)
      if (data) {
        this.getFlowerNum()
        if (this.currentTab === PETALS_RECORD_TAB) {
          this.pagination.page = 1
          this.getPetalRecords()
        }
      }

    },
    /* 获取我的花瓣信息 */
    async getFlowerNum () {
      const { data } = await getFlowerNum()
      this.flowerInfo = data
      this.showAward = true
    }
  }
}




</script>